<template>
  <div class="dashboard-container" >
    <el-row class="panel-group">
      <el-col :sm="24" :md="8">
        <div class="ww-border cover-corner" style="margin: 10px;">
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="../../assets/images/groups-total.png" alt="">
            </div>
            <div class="weui-media-box__bd">
              <p class="weui-media-box__title" v-if="roles[0] ==='ROLE_ADMIN'">门站总数</p>
              <p class="weui-media-box__title" v-else="">门站名称</p>
              <p class="weui-media-box__desc"  v-if="roles[0] ==='ROLE_ADMIN'"><span class="weui-media-box__desc-pre">12,396</span></p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="../../assets/images/仪表总数.png" alt="仪表总数">
            </div>
            <div class="weui-media-box__bd">
              <p class="weui-media-box__title">仪表总数/在线总数</p>
              <p class="weui-media-box__desc"><span class="weui-media-box__desc-pre">1052</span>&nbsp;/&nbsp;<span
                class="weui-media-box__desc-pend">798</span></p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="../../assets/images/燃气警器.png" alt="报警总数">
            </div>
            <div class="weui-media-box__bd">
              <p class="weui-media-box__title">报警总数 / 未处理数</p>
              <p class="weui-media-box__desc"><span class="weui-media-box__desc-pre">3999,259</span>&nbsp;/&nbsp;<span
                class="weui-media-box__desc-pend" style="color: rgb(202,59,77);">2</span></p>
            </div>
          </a>
        </div>
      </el-col>
      <el-col :sm="24" :md="16">
        <div class="ww-border cover-corner" style="margin: 10px;">
          <el-row>
            <el-col :md="12">
              <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                  <img class="weui-media-box__thumb" src="../../assets/images/通讯模块.png" alt="通讯模块">
                </div>
                <div class="weui-media-box__bd">
                  <p class="weui-media-box__title">通讯模块总数 / 在线总数</p>
                  <p class="weui-media-box__desc"><span class="weui-media-box__desc-pre">3018</span>&nbsp;/&nbsp;<span
                    class="weui-media-box__desc-pend">1206</span></p>
                </div>
              </a>
              <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                  <img class="weui-media-box__thumb" src="../../assets/images/门店总数.png" alt="">
                </div>
                <div class="weui-media-box__bd">
                  <p class="weui-media-box__title">门禁总数 / 在线总数 </p>
                  <p class="weui-media-box__desc"><span class="weui-media-box__desc-pre">824</span>&nbsp;/&nbsp;<span
                    class="weui-media-box__desc-pend">618</span></p>
                </div>
              </a>
              <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                  <img class="weui-media-box__thumb" src="../../assets/images/阀门总数.png" alt="">
                </div>
                <div class="weui-media-box__bd">
                  <p class="weui-media-box__title">阀门总数 / 在线总数</p>
                  <p class="weui-media-box__desc"><span class="weui-media-box__desc-pre">2016</span>&nbsp;/&nbsp;<span
                    class="weui-media-box__desc-pend">1608</span></p>
                </div>
              </a>
            </el-col>
            <el-col :md="12">
              <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                  <img class="weui-media-box__thumb" src="../../assets/images/修正仪.png" alt="">
                </div>
                <div class="weui-media-box__bd">
                  <p class="weui-media-box__title">修正仪总数 / 在线总数</p>
                  <p class="weui-media-box__desc"><span class="weui-media-box__desc-pre">2064</span>&nbsp;/&nbsp;<span
                    class="weui-media-box__desc-pend">1812</span></p>
                </div>
              </a>
              <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                  <img class="weui-media-box__thumb" src="../../assets/images/燃气警器.png" alt="">
                </div>
                <div class="weui-media-box__bd">
                  <p class="weui-media-box__title">燃气警器总数 / 在线总数</p>
                  <p class="weui-media-box__desc"><span class="weui-media-box__desc-pre">1950</span>&nbsp;/&nbsp;<span
                    class="weui-media-box__desc-pend">1206</span></p></p>
                </div>
              </a>
              <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                  <img class="weui-media-box__thumb" src="../../assets/images/摄像头.png" alt="">
                </div>
                <div class="weui-media-box__bd">
                  <p class="weui-media-box__title">摄像头总数 / 在线总数</p>
                  <p class="weui-media-box__desc"><span class="weui-media-box__desc-pre">3018</span>&nbsp;/&nbsp;<span
                    class="weui-media-box__desc-pend">1206</span></p>
                </div>
              </a>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="ww-border four-corner">
      <div id="groupTopFiveChat" style="margin: 0 auto" :style="{width: '100%', height: '300px'}"></div>
    </el-row>
    <el-row>
      <p class="text-center" style="font-size: 20px;color: #FFFFFF;">门站全国分布示意图</p>
      <p class="text-center group-desc">
        <span class="group-circle-big"></span><span class="group-circle-name">超级门站</span>
        <span class="group-circle-mid"></span><span class="group-circle-name">中级门站</span>
        <span class="group-circle-small"></span><span class="group-circle-name">小型门站</span>
      </p>
    </el-row>
    <el-row>
      <div id="mapChart" style="margin: 0 auto"  :style="{width: '100%', height: '500px'}"></div>
    </el-row>
  </div>

</template>

<script>
  import { mapGetters } from 'vuex'
  import { getLoginUser } from '../../utils/auth'
  import { getCompany } from '../../api/company'
  import 'echarts/map/js/china'
  import { GeoCoordMap, mapData } from './data'
  export default {
    name: 'dashboard',
    data() {
      return {
        companName: '',
        address: '',
        contact: '',
        taxIdentificationCode: '',
        mapChart: null,
        topFiveChart: null
      }
    },
    methods: {
      drawLine() {
        const dataAxis = ['门站002', '门站007', '门站029', '门站016', '门站032']
        const data = [4240, 3516, 2280, 1612, 4240]
        const yMax = 5000
        const dataShadow = []

        for (var i = 0; i < data.length; i++) {
          dataShadow.push(yMax)
        }

        const option = {
          title: {
            text: '门站用气量TOP5',
            left: 'center',
            textStyle: {
              align: 'center',
              color: '#fff',
              width: '100%',
              fontSize: 20
            }
          },
          xAxis: {
            data: dataAxis,
            axisLabel: {
              inside: true,
              textStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            z: 10
          },
          yAxis: {
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#999'
              }
            }
          },
          // dataZoom: [
          //   {
          //     type: 'inside'
          //   }
          // ],
          series: [
            { // For shadow
              type: 'bar',
              itemStyle: {
                color: 'rgba(0,153,255,0.0)'
                // borderWidth: 2,
                // borderColor: '#0099FF'
                // normal: { color: 'rgba(0,0,0,0.05)' }
              },
              barGap: '-100%',
              barCategoryGap: '40%',
              data: dataShadow,
              animation: false
            },
            {
              type: 'bar',
              label: {
                show: true,
                position: 'top',
                color: '#FFF'
              },
              itemStyle: {
                color: 'rgba(0,153,255,0.30)',
                borderWidth: 2,
                borderColor: '#0099FF',
                // normal: { color: 'rgba(0,0,0,0.05)'
                emphasis: {
                  color: 'rgba(0,153,255,0.30)'
                }
              },
              data: data
            }
          ]
        }
        const groupTopFiveChat = this.$echarts.init(document.getElementById('groupTopFiveChat'))
        // 绘制图表
        groupTopFiveChat.setOption(option)
        this.topFiveChart = groupTopFiveChat
      },
      drawMap() {
        const geoCoordMap = GeoCoordMap
        const data = mapData
        var convertData = function(data) {
          var res = []
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name]
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              })
            }
          }
          return res
        }
        const bigGroup = [], midGroup = [], smallGroup = []
        data.map((val) => {
          if (val.value === 2) {
            bigGroup.push(val)
          } else if (val.value === 1) {
            midGroup.push(val)
          } else {
            smallGroup.push(val)
          }
        })
        const option1 = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            top: 'center',
            left: 'center',
            data: ['pm2.5'],
            textStyle: {
              color: '#fff'
            }
          },
          geo: {
            map: 'china',
            label: {
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {					// 普通状态下的样式
                areaColor: 'rgb(13,22,63)',
                borderColor: '#0099FF'
              },
              emphasis: {					// 高亮状态下的样式
                areaColor: '#2a333d',
                label: {
                  color: '#FFF'
                }
              }
            }
          },
          series: [
            {
              name: '大型门站',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: convertData(bigGroup),
              symbolSize: 12,
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: '#f4e925',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              zlevel: 1
            },
            {
              name: '中型门站',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: convertData(midGroup),
              symbolSize: 10,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: '#ddb926'
                }
              }
            },
            {
              name: '小型门站',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: convertData(smallGroup),
              symbolSize: 6,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: '#ddb926'
                }
              }
            }
          ]
        }
        const mapChart = this.$echarts.init(document.getElementById('mapChart'))
        // 绘制图表
        mapChart.setOption(option1)
        this.mapChart = mapChart
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ])
    },
    created() {
      getCompany().then(data => {
        this.companName = data.data.name
        this.address = data.data.address
        this.contact = data.data.contact
        this.taxIdentificationCode = data.data.taxIdentificationCode
      })
    },
    mounted() {
      if (!getLoginUser().companyId) {
        this.$router.push('/company')
      }
      this.drawLine()
      this.drawMap()
      window.onresize = () => {
        if (this.topFiveChart) {
          this.topFiveChart.resize()
        }
        if (this.mapChart) {
          this.mapChart.resize()
        }
      }
    }
  }
</script>

<style  lang="less" scoped>
  .group-desc {
    color: white;
    line-height: 27px;
    font-size: 27px;
    .group-circle {
      display: inline-block;
      border-radius: 50%;
      font-size: 27px;
      color: #FFFFFF;
      &-name{
        color: white;
        margin-left: 15px;
        line-height: 24px;
      }
      &-big {
        display: inline-block;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        opacity: 1;
        background: url("../../assets/images/超级门店.png") no-repeat;
        background-size: 100% 100%;
        background-position: center center;
      }
      &-mid {
        display: inline-block;
        border-radius: 50%;
        width: 12px;
        height: 12px;
        opacity: 0.8;
        background: #FFCC01;
        box-shadow: 0 0 4px 0 #000000
      }
      &-small {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        opacity: 0.5;
        background: #FFCC01;
        box-shadow: 0 0 4px 0 #000000;
      }
    }


  }
  .dashboard {
    overflow: hidden;
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .weui-media-box {
    padding: 15px;
    padding-right: 2px;
    position: relative;
  }

  .weui-media-box:before {
    content: " ";
    position: absolute;
    left: 15px;
    top: 0;
    right: 15px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #0099FF 50%, transparent 100%);
    /*border-top: 10px solid #E5E5E5;*/
    color: #E5E5E5;
    transform-origin: 0 0;
    transform: scaleY(0.5);
  }

  .weui-media-box:first-child:before {
    display: none;
  }

  a.weui-media-box {
    color: #000000;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  /*a.weui-media-box:active {*/
    /*background-color: #ECECEC;*/
  /*}*/

  .weui-media-box__title {
    font-weight: 400;
    line-height: 18px;
    margin-top: 10px;
    margin-bottom: 5px;
    color: white;
    font-size: 18px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
    word-break: break-all;
  }

  .weui-media-box__desc {
    font-size: 32px;
    margin: 5px;
    color: white;
    line-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    &-pre {
      color: #2DB6F4;
    }
    &-pend {
      color: rgb(25, 197, 135);
    }
  }

  .weui-media-box__info {
    margin-top: 5px;
    padding-bottom: 5px;
    font-size: 13px;
    color: #CECECE;
    line-height: 1em;
    list-style: none;
    overflow: hidden;
  }

  .weui-media-box__info__meta {
    float: left;
    padding-right: 1em;
  }

  .weui-media-box__info__meta_extra {
    padding-left: 1em;
    border-left: 1px solid #CECECE;
  }

  .weui-media-box_text .weui-media-box__title {
    margin-bottom: 8px;
  }

  .weui-media-box_appmsg {
    display: flex;
    align-items: center;
  }

  .weui-media-box_appmsg .weui-media-box__hd {
    margin-right: .8em;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }

  .weui-media-box_appmsg .weui-media-box__thumb {
    width: 100%;
    max-height: 100%;
    vertical-align: top;
  }

  .weui-media-box_appmsg .weui-media-box__bd {
    flex: 1;
    min-width: 0;
  }

  .weui-media-box_small-appmsg {
    padding: 0;
  }

  .weui-media-box_small-appmsg .weui-cells {
    margin-top: 0;
  }

  .weui-media-box_small-appmsg .weui-cells:before {
    display: none;
  }

  .cover-corner {
    position: relative;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    background: linear-gradient(-45deg, transparent 15px, transparent 0), linear-gradient(45deg, transparent 15px, transparent 0);
    &:after {
      content: ' ';
      border: solid transparent;
      position: absolute;
      border-width: 10px;
      border-top-color: #0099FF;
      border-right-color: #0099FF;
      top: -1px;
      right: -1px;
    }
    &:before {
      content: ' ';
      border: solid transparent;
      position: absolute;
      border-width: 10px;
      border-bottom-color: #0099FF;
      border-left-color: #0099FF;
      bottom: -1px;
      left: -1px;
    }
  }

</style>
